<template>
    <div class="goods-type-wrapper">
	  <RTitle title='商品类型' url="/pages/runErrands/confirm"/>
      <div class="type-list" v-if="confirmType == 3">
        <div class="item" :class="{'active': selectIndex === index}"  @click="selectType(index)" v-for="(item, index) in typeList" :key="index">{{item}}</div>
      </div>  
      <div class="weight-box">
        <div>重量</div>
        <div class="select-num">
          <span v-if="rangeValue < minValue">小于{{minValue}}公斤</span>
          <span v-else>{{rangeValue}}公斤</span>
        </div>
        <div class="range-box">
          <!-- <mt-range class="range" v-model="rangeValue" :min="minValue - 1" :max="maxValue"></mt-range> -->
		  <slider class="range" activeColor="#04b7a5" :value="rangeValue" :min="minValue - 1" :max="maxValue" @change="sliderChange" />
          <div class="tip-box">
            <span class="tip left">小于{{minValue}}公斤</span>
            <span class="tip right">{{maxValue}}公斤</span>
          </div>
        </div>
      </div>
      <div class="btn-box"><button class="btn" @click="confirm">确定</button></div>
    </div>
</template>

<script>
import RTitle from './components/r-title.vue'
import common from '../../utils/common.js';
var app = getApp()
var _this = this
export default {
  name: 'SelectGoods',
  components:{
	RTitle  
  },
  data () {
    return {
      typeList: ['鲜花', '餐饮', '生鲜', '文件', '电子产品', '钥匙', '服饰', '其他'],
      selectIndex: -1,
      rangeValue: 0,
      minValue: 2,
      maxValue: 20,
      confirmType: 3,
	  serviceWeightInfo: [] // 重量分档信息
    }
  },
  onLoad () {
    _this = this
    this.confirmType = app.globalData.confirmType
    if (this.confirmType == 3) {
      var sendGoods = app.globalData.sendGoods
      console.log('1111111111111', sendGoods)
      if (sendGoods != '') {
        this.typeList.map((item, index) => {
          if (item == sendGoods.type) {
            _this.selectIndex = index
          }
        })
        this.rangeValue = sendGoods.weight
      }
      this.getweightInfo(3)
    } else {
      let buyGoods = app.globalData.buyGoodsWeight
      if (buyGoods != '') {
        this.rangeValue = buyGoods.weight
      }
      this.getweightInfo(2)
    }
  },
  methods: {
	  sliderChange (e) {
		  console.log('滑动重量', e)
		  this.rangeValue = e.detail.value
	  },
    selectType (index) {
      this.selectIndex = index
    },

    confirm () {
		if (this.confirmType == 3 && this.selectIndex == -1) {
			wx.showModal({
				title: app ? common.changeTxt('提示') : '提示',
				content: common.changeTxt('请选择物品类型'),
				showCancel: false,
				success: function() {  
					
				}
			});
			return
		}
		let weight = this.rangeValue < this.minValue ? '小于' + this.minValue : this.rangeValue
		let serviceWeight = ''
		if (this.serviceWeightInfo.length) {
			this.serviceWeightInfo.forEach(item => {
				let rangeValue = this.rangeValue - 0,start_weight = item.start_weight - 0,end_weight = item.end_weight - 0;
				if ((rangeValue > start_weight || rangeValue == start_weight) 
				&& (rangeValue < end_weight || rangeValue == end_weight)) {
					serviceWeight = item
				}
			})
		}
		if (this.confirmType == 3 && this.selectIndex >= 0) {
			let goods = this.typeList[this.selectIndex]
			app.globalData.sendGoods = {
				type: goods,
				weight: this.rangeValue,
				showTxt: goods + '、' + weight + '公斤',
				serviceWeight: serviceWeight,
				weightTip: weight?weight + '公斤':''
			}
		} else if (this.confirmType == 2) {
			app.globalData.buyGoodsWeight = {
				weight: this.rangeValue,
				showTxt: weight + '公斤',
				serviceWeight: serviceWeight,
				weightTip: weight?weight + '公斤':''
			}
		}
		console.log('选中的商品信息', app.globalData.sendGoods, app.globalData.buyGoodsWeight)
		common.navigateBack()
    },

    getweightInfo (type) {
		common.post('paotui&c=Paotui&a=service_weight_info', {type, plugin: true}, (res) => {
			if (res.service_weight_multilevel_switch == 1 && res.service_weight_info && res.service_weight_info.length > 0) {
				_this.serviceWeightInfo = res.service_weight_info
			    _this.minValue = res.service_weight_info[0].end_weight * 1
				if (res.service_weight_info.length > 1) {
					_this.maxValue = res.service_weight_info[res.service_weight_info.length - 1].end_weight * 1
				}
			}
			if (_this.rangeValue == 0) {
				_this.rangeValue = _this.minValue - 1
			}
		})
    }
  }
}
</script>

<style lang="stylus">
$theme-color=#00c78c
.goods-type-wrapper
  height 100%
  background #fff
  .type-list
    padding 30px 0 15px 15px
    display flex
    flex-wrap wrap
    border-bottom 1PX solid #e5e5e5
    .item
      width -webkit-calc(25% - 15px)
      width calc(25% - 15px)
      margin-right 15px
      margin-bottom 15px
      font-size 14px
      border 1PX solid #e5e5e5
      box-sizing border-box
      padding 9px 0
      text-align center
      &.active
        border-color $theme-color
        color $theme-color
  .weight-box
    padding 30px 15px 0
    text-align center
    font-size 16px
    .select-num
      color $theme-color
      margin-top 20px
    .range-box
      padding 0 25px
      position relative
      .range
        padding 10px 15px
        .mt-range-progress
          background #04b7a5
      .tip-box
        display flex
        justify-content space-between
        font-size 14px
  .btn-box
    padding 35px 15px 0
    .btn
      width 100%
      color #fff
      background $theme-color
      font-size 17px
      line-height 2.56
      border-radius 5px
      &:active
        background darken(#04b7a5, 10%)
</style>
